<!-- subpkg_consult/order_detail/index.vue -->
<script lang="ts" setup>
  import { orderDetailApi } from '@/apis/consult'
  import type { OrderDetail } from '@/types/consult'
  import { onLoad } from '@dcloudio/uni-app'
  import dayjs from 'dayjs'
  import { ref, onUnmounted } from 'vue'

  const orderId = ref('')

  const props = defineProps<{
    orderId: string
  }>()

  const orderDetail = ref<OrderDetail>()

  const getOrderDetail = async () => {
    const res = await orderDetailApi(props.orderId)
    orderDetail.value = res
    console.log('订单详情', orderDetail.value)
  }

  onLoad(async () => {
    await getOrderDetail()
    getCountDown()
  })

  //订单类型1问医生2极速问诊3开药问诊4药品订单
  const typeList = ['', '问医生', '极速问诊', '开药问诊', '药品订单']
  //订单状态1待支付2待接诊3咨询中4已完成5已取消
  const statusList = ['', '待支付', '待接诊', '咨询中', '已完成', '已取消']

  const countDown = ref('00:15:00')
  const time = ref(0)
  const getCountDown = () => {
    time.value = orderDetail.value!.countdown

    // 使用 duration 正确处理秒数
    const formatTime = (seconds: number) => {
      const duration = dayjs.unix(seconds)
      return duration.format('HH:mm:ss')
    }

    countDown.value = formatTime(time.value)

    if (time.value > 0) {
      const timer = setInterval(() => {
        time.value--
        if (time.value <= 0) {
          clearInterval(timer)
        }
        countDown.value = formatTime(time.value)
      }, 1000)

      // 组件卸载时清除定时器
      onUnmounted(() => {
        clearInterval(timer)
      })
    }
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="consult-page">
      <view class="page-header">
        <!-- 订单状态 -->
        <view class="order-status">
          <view class="label">
            <text class="title"
              >{{ typeList[Number(orderDetail!.type)] }} {{ orderDetail?.payment }}元</text
            >
            <text class="tips">
              取消/退款进度：您的订单已取消，诊金将在1-7个工作日内退回原支付账户。
            </text>
          </view>
          <text class="status">{{ orderDetail?.statusValue }}</text>
        </view>
        <!--  医生信息 -->
        <view class="consult-doctor">
          <text class="lable">服务医生信息</text>
          <view class="doctor">
            <image class="doctor-avatar" :src="orderDetail?.docInfo?.avatar" />
            <view class="doctor-info">
              <view class="meta">
                <text class="name">{{ orderDetail?.docInfo?.name }}</text>
                <text class="title"
                  >{{ orderDetail?.docInfo?.depName }} |
                  {{ orderDetail?.docInfo?.positionalTitles }}</text
                >
              </view>
              <view class="meta">
                <text class="tag">{{ orderDetail?.docInfo?.gradeName }}</text>
                <text class="hospital">{{ orderDetail?.docInfo?.hospitalName }}</text>
              </view>
            </view>
            <view class="arrow">
              <uni-icons size="18" color="#C3C3C5" type="forward" />
            </view>
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="consult-patient">
        <view class="list-title">患者资料</view>
        <uni-list :border="false">
          <uni-list-item
            title="患者信息"
            :right-text="`${orderDetail?.patientInfo.name} | ${orderDetail?.patientInfo.gender} | ${orderDetail?.patientInfo.age}岁`"
          />
          <uni-list-item title="病情描述" :note="orderDetail?.illnessDesc" />
        </uni-list>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="list-title">订单信息</view>
        <uni-list :border="false">
          <uni-list-item title="订单编号" :right-text="orderDetail?.orderNo" />
          <uni-list-item title="创建时间" :right-text="orderDetail?.createTime" />
          <uni-list-item
            v-if="Number(orderDetail?.status) === 5"
            title="取消时间"
            :right-text="orderDetail?.cancelTime"
          />
          <uni-list-item title="应付款" :right-text="`¥${orderDetail?.payment}`" />
          <uni-list-item title="优惠券">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderDetail?.couponDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ orderDetail?.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ orderDetail?.actualPayment }}</view>
            </template>
          </uni-list-item>
          <uni-list-item
            v-if="Number(orderDetail?.status) === 4"
            title="支付时间"
            :right-text="orderDetail?.createTime"
          />
          <uni-list-item title="支付方式" right-text="支付宝支付" />
        </uni-list>
      </view>

      <view class="notice-bar" v-if="Number(orderDetail?.status) === 1">
        <uni-notice-bar :text="`请在 ${countDown} 内完成支付，超时订单将取消`" />
      </view>
      <view class="notice-bar" v-if="Number(orderDetail?.status) === 3">
        <uni-notice-bar :text="`咨询中，本次问诊将在 ${countDown} 后结束`" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount"> 需付款: <text class="number">¥39.00</text> </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './order_detail.scss';
</style>
